<template>
  <div class="search-box">
    <van-search
      v-model="searchContent"
      shape="round"
      background="#F5F8FC"
      show-action
      placeholder="搜一搜"
      left-icon
      @search="onSearch"
      @cancel="onCancel"
    ></van-search>
    <div class="search-content">
      <div class="hot-search" v-if="hotSearchList.length > 0">
        <div class="hot-title">
          <span>热门搜索</span>
          <van-icon name="replay" size="14px" @click="getHotSearchList" />
        </div>
        <div class="hot-tag">
          <van-tag
            v-if="item.name"
            v-for="(item, index) in hotSearchList"
            :key="index"
            :data-id="item.id"
            round
            :color="item.color ? item.color:'#92c8ff'"
            @click="handleToBookDetail(item.id)"
          >{{item.name}}</van-tag>
        </div>
      </div>
      <div class="history-search" v-if="historySearchList.length > 0">
        <div class="history-title">
          <span>搜索历史</span>
          <van-icon name="delete" size="14px" @click="handleClearHistory" />
        </div>
        <div class="history-tag">
          <van-tag
            v-for="(item, index) in historySearchList"
            :key="index"
            round
            :color="item.color ? item.color:'#92c8ff'"
            @click="onSearch(item)"
          >{{item}}</van-tag>
        </div>
      </div>
    </div>
    <div class="list-cotent" v-if="searchList.length > 0">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <detailCard
          v-for="(item, index) in searchList"
          :name="item.name"
          :writer="item.writer"
          :is_over="item.is_over"
          :type="item.type"
          :intro="item.intro"
          :image="item.image"
          :key="index"
          @click="handleToBookDetail(item.id)"
        ></detailCard>
      </van-list>
    </div>
  </div>
</template>

<script>
import Taro from "@tarojs/taro";
import { getSearch } from "@api/homepage";
import DetailCard from "@components/DetailCard";
export default {
  name: "Search",
  data() {
    return {
      searchContent: "",
      hotSearchList: [],
      historySearchList: [],
      colorList: [
        "#ee0a24",
        "#1989fa",
        "#ff976a",
        "#ed6a0c",
        "#07c160",
        "#ff6034",
        "#ffd01e",
        "#ee0a24",
        "#ff8917",
      ],
      searchList: [],
      loading: false,
      finished: false,
    };
  },
  components: { DetailCard },
  created() {
    this.getHotSearchList();
    this.getHistorySearchList();
  },
  methods: {
    onSearch(keyword) {
      this.loading = false;
      getSearch({ keyword }).then((res) => {
        this.searchList = res.data;
        this.loading = true;
        this.finished = true;
        this.setHistorySearchList(keyword);
      });
    },
    onCancel() {
      Taro.navigateBack();
    },
    getHotSearchList() {
      getSearch().then((res) => {
        if (res.data.length > 0) {
          if (res.data.length > 10) {
            this.hotSearchList = res.data.slice(0, 10);
          } else {
            this.hotSearchList = res.data;
          }
          this.hotSearchList.forEach((item) => {
            item.color = this.colorList[
              Math.floor(Math.random() * (this.colorList.length + 1))
            ];
          });
        }
      });
    },
    getHistorySearchList() {
      let historySearchList = Taro.getStorageSync("history");
      if (historySearchList) {
        let _historySearchList = JSON.parse(historySearchList);
        if (_historySearchList.length > 0) {
          this.historySearchList = _historySearchList;
          //   this.historySearchList.forEach(item => {
          //     item.color = this.colorList[
          //       Math.floor(Math.random() * (this.colorList.length + 1))
          //     ];
          //   });
        }
      }
    },
    setHistorySearchList(keywrod) {
      let historySearchList = Taro.getStorageSync("history");
      if (historySearchList) {
        let _historySearchList = JSON.parse(historySearchList);
        if (_historySearchList.length > 0) {
          if (_historySearchList.indexOf(keywrod) == -1) {
            _historySearchList.push(keywrod);
            Taro.setStorageSync("history", JSON.stringify(_historySearchList));
          }
        } else {
          _historySearchList.push(keywrod);
          Taro.setStorageSync("history", JSON.stringify(_historySearchList));
        }
      } else {
        let historySearchList = [];
        historySearchList.push(keywrod);
        Taro.setStorageSync("history", JSON.stringify(historySearchList));
      }
      this.getHistorySearchList();
    },
    handleClearHistory() {
      let historySearchList = Taro.getStorageSync("history");
      if (historySearchList) {
        let _historySearchList = JSON.parse(historySearchList);
        if (_historySearchList.length > 0) {
          this.historySearchList = [];
          Taro.setStorageSync(
            "history",
            JSON.stringify(this.historySearchList)
          );
        }
      }
    },
    onLoad() {},
    handleToBookDetail(id) {
      Taro.navigateTo({
        url: `/pages/bookdetail/bookdetail?id=${id}`,
      });
    },
  },
};
</script>

<style scoped>
.search-box {
}
.search-content,
.list-cotent {
  padding: 20px 40px;
}
.hot-search,
.history-search {
  margin-bottom: 40px;
}
.hot-title span,
.history-title span {
  font-size: 28px;
}
.hot-title,
.history-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.hot-tag,
.history-tag {
}
.hot-tag .van-tag,
.history-tag .van-tag {
  margin-right: 8px;
}
</style>